<!-- 三级选择的省市区组件 -->
<template>
  <div>
    <div v-if="calss_treeArr && calss_treeArr[0]" style="width: 100%">
      <el-cascader
        v-model="classArrModel"
        placeholder="请选择省市区"
        :options="calss_treeArr"
        :props="props"
        filterable
        clearable
        collapse-tags
        style="width: 100%"
        ref="baClaseSelect"
        @change="cascaderChange"
      />
    </div>
    <div v-else>组件加载中。。。</div>
  </div>
</template>

<script>
import { regiongetAll } from '@/api/base.js'

var myVue = {}
import myMixin from '@/mixins/index.js'
import { mapState } from 'vuex'
export default {
  mixins: [myMixin],
  props: {
    checkStrictly: {
      type: [String, Boolean, Number],
      default: () => {
        return false
      }
    },
    multiple: {
      type: [String, Boolean, Number],
      default: () => {
        return false
      }
    },
    classArrModelJoin: {
      type: [String, Array, Number],
      default: () => {
        return []
      }
    }
  },
  computed: {
    ...mapState({
      enumerationObj: state => state.user.enumerationObj
    })
  },
  watch: {
    classArrModelJoin (arr) {
      this.classArrModel = arr
    }
  },
  data () {
    return {
      classArrModel: [],
      props: {
        checkStrictly: myVue.checkStrictly,
        multiple: myVue.multiple,
        value: 'id',
        label: 'text'
      },
      calss_treeArr: []
    }
  },
  beforeCreate () {
    myVue = this
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {
    this.getData()
  },
  methods: {
    // 递归获取数据
    getData () {
      this.getEnumerationObj(['rep_third_category_all']).then(res => {
        this.calss_treeArr = this.enumerationObj.calss_tree
        this.classArrModel = this.classArrModelJoin
        setTimeout(() => {
          if (!this.enumerationObj || !this.calss_treeArr) {
            this.getData()
          }
        }, 500)
      })
    },
    clearData () {
      setTimeout(() => {
        this.$refs.baClaseSelect.panel.activePath = []
        this.classArrModel = []
      }, 100)
    },
    expandChange (val) {
      if (!this.checkStrictly) {
        this.$emit('expandChange', val)
      }
    },
    // 子组件曝露出的方法
    cascaderChange (val) {
      // if (this.autoOpen) {
      //   this.$refs.classSelectDom.dropDownVisible = false;
      // }

      // this.$refs.classSelectDom.showPopper = true
      this.$emit('change', val)
    },
    // 输出的格式
    returnNewArr (res, level) {
      const newArr = []
      res.result.data.map(item => {
        newArr.push({
          value: item.id,
          label: item.text,
          leaf: level >= 2
        })
      })
      return newArr
    },
    // 初始加载一级类目
    getInit (level) {
      return new Promise((a, b) => {
        repFirstCategory({
          rows: '9999'
        }).then(res => {
          a(this.returnNewArr(res, level))
        })
      })
    },
    // 初始加载二级类目
    repSecondCategoryFn (cfirst, level) {
      return new Promise((a, b) => {
        repSecondCategory({
          rows: '9999',
          cfirst
        }).then(res => {
          a(this.returnNewArr(res, level))
        })
      })
    },
    // 初始加载三级类目
    repThirdCategoryFn (csecond, level) {
      return new Promise((a, b) => {
        repThirdCategory({
          rows: '9999',
          csecond
        }).then(res => {
          a(this.returnNewArr(res, level))
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
</style>
